import Statement from '../index'
import './index.less'
import { getDebt, getDailog, educe } from '../../../../services/statement/index'
import { Form, DatePicker, Table, Modal, Select, Space } from 'antd';
import type { DatePickerProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useState, useEffect } from 'react';
interface DataType {
    equity: number,
    fsId: number
    fsName: string,
    fsRowNum: number,
    oneAmount: number,
    twoAmount: number
}
//弹框表格
interface DataTypeDlag {
    key: string;
    subName: string;
    efOperator: string;
    finalBalance: number;
    yearBalance: number
}
const columnsDalog: ColumnsType<DataTypeDlag> = [
    {
        title: '科目名称',
        dataIndex: 'subName',
        key: 'subName',
    },
    {
        title: '运算符',
        dataIndex: 'efOperator',
        key: 'efOperator',
    },
    {
        title: '期末余额',
        dataIndex: 'finalBalance',
        key: 'finalBalance',
    },
    {
        title: '年初余额',
        dataIndex: 'yearBalance',
        key: 'yearBalance',
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];
//弹框2
interface DataTypeDlag2 {
    key: string;
    name: string;
    age: number;
    address: string;
}
const columnsDalog2: ColumnsType<DataTypeDlag2> = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: 'Action',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>删除</a>
            </Space>
        ),
    },
];
const dalogData2: DataTypeDlag[] = [

];
function BalanceSheet() {
    //渲染页面
    useEffect(() => {
        getDebtData();
    }, [])

    let [data, setData] = useState([]);
    const getDebtData = async () => {
        getDebt('2023-10', 1).then((res) => {
            let _data = res.data.map((v: any, i: any) => {
                return { ...v, key: v.fsId }
            })
            _data.unshift(newRow);
            const newData = [..._data];
            newData.splice(12, 0, {
                equity: 2,
                fsId: null,
                fsName: '非流动资产',
                fsRowNum: null,
                oneAmount: null,
                twoAmount: null,
            })
            newData.splice(28, 0, {
                equity: 3,
                fsId: null,
                fsName: '流动负债',
                fsRowNum: null,
                oneAmount: null,
                twoAmount: null,
            })
            newData.splice(40, 0, {
                equity: 3,
                fsId: null,
                fsName: '非流动负债',
                fsRowNum: null,
                oneAmount: null,
                twoAmount: null,
            })
            newData.splice(47, 0, {
                equity: 3,
                fsId: null,
                fsName: '(所有者权益)或股东权益',
                fsRowNum: null,
                oneAmount: null,
                twoAmount: null,
            })
            const leftTable = newData.splice(0, 28)
            const rightTable = [...newData]
            let _newDate = []
            for (let i = 0; i <= 25; i++) {
                let { equity, fsId, fsName, fsRowNum, oneAmount, twoAmount } = rightTable[i]
                let n = { ...leftTable[i], equity2: equity, fsId2: fsId, fsName2: fsName, fsRowNum2: fsRowNum, oneAmount2: oneAmount, twoAmount2: twoAmount }
                _newDate.push(n)
            }
            _newDate.push(leftTable[26]);
            _newDate.push(leftTable[27]);
            // @ts-ignore
            setData(_newDate);
        })
    }
    const newRow = {
        equity: 1,
        fsId: null,
        fsName: '流动资产',
        fsRowNum: null,
        oneAmount: null,
        twoAmount: null
    };
    const newRow1 = {
        equity: 2,
        fsId: null,
        fsName: '流动资产',
        fsRowNum: null,
        oneAmount: null,
        twoAmount: null
    };
    const { Option } = Select;
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    };
    //货币资金弹框
    const [dalogData, setDalogData] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
        getDailog('2023-10', 1).then((res) => {
            let _data1 = res.data.map((v: any) => {
                return { ...v, key: v.efId }
            })
            setDalogData(_data1);
        })
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //短期借款弹框
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const showModal2 = () => {
        setIsModalOpen(true);
    };
    const handleOk2 = () => {
        setIsModalOpen(false);
    };
    const handleCancel2 = () => {
        setIsModalOpen(false);
    };
    //导出
    const exportBtn = async (value: any) => {
        console.log(1111);
        
        educe().then((res) => {
            let a=document.createElement('a')
            let b=new Blob([res],{type:'.xls'})
            a.setAttribute('href',URL.createObjectURL(b))
            a.setAttribute('download','不知道.xls')
            a.click()
        })
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '资产',
            dataIndex: 'fsName',
            key: 'fsName',
            align: 'center',
            width: '200px',
            render: (text, record) => {
                if (record.equity == 1) {
                    return (<div>
                        <span style={{ fontWeight: record.fsName == '流动资产' ? 'bold' : '' }}>{text}</span>
                        <a style={{ marginLeft: '20px', display: record.fsName == '货币资金' ? 'inline-block' : 'none' }} onClick={showModal}>编辑</a>
                    </div>)
                } else if (record.equity == 2) {
                    return (<div>
                        <span style={{ fontWeight: record.fsName == '非流动资产' || record.fsName == '非流负债' ? 'bold' : '' }}>{text}</span>
                        <a style={{ marginLeft: '20px', display: record.fsName == '货币资金' ? 'inline-block' : 'none' }} onClick={showModal}>编辑</a>
                    </div>)
                } else {
                    return null
                }
            }
        },
        {
            title: '行次',
            dataIndex: 'fsRowNum',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 1 || record.equity == 2) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {
                    return null
                }
            }
        },
        {
            title: '期末余额',
            dataIndex: 'oneAmount',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 1 || record.equity == 2) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {
                    return null
                }
            }
        },
        {
            title: '年初余额',
            dataIndex: 'twoAmount',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 1 || record.equity == 2) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {
                    return null
                }
            }
        },
        {
            title: '负债和所以者权益',
            dataIndex: 'fsName2',
            key: 'fsName2',
            align: 'center',
            width: '200px',
            render: (text, record) => {
                if (record.equity == 3 || record.equity == 4 || record.equity == 5 || 1) {
                    return (
                        <div>
                            <span style={{ fontWeight: record.fsName === '流动负债' ? 'bold' : '' }}>{text}</span>
                            <a onClick={showModal2} style={{ marginLeft: '20px', display: record.fsId == 1 ? 'inline-block' : 'none' }} >编辑</a>
                        </div>
                    )
                } else {
                    return null
                }
            }
        },
        {
            title: '行次',
            dataIndex: 'fsRowNum2',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 3 || record.equity == 4 || record.equity == 5 || 1) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {

                }
            }
        },
        {
            title: '期末余额',
            dataIndex: 'oneAmount2',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 3 || record.equity == 4 || record.equity == 5 || 1) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {
                    return
                }
            }
        },
        {
            title: '年初余额',
            dataIndex: 'twoAmount2',
            align: 'center',
            render: (text, record) => {
                if (record.equity == 3 || record.equity == 4 || record.equity == 5 || 1) {
                    return (<div>
                        <span>{text}</span>
                    </div>)
                } else {
                    return
                }
            }
        },
    ]
    return (
        <div className='finall'>
            <Statement header='资产负债表'></Statement>
            <div className='center'>
                <Form name="customized_form_controls">
                    <Form.Item
                        label="记账时间："
                        name="date"
                        style={{ marginLeft: '60px' }}
                    >
                        <DatePicker onChange={onChange} />
                    </Form.Item>
                </Form>
                <Form>
                    <button onClick={exportBtn} style={{ width: '80px', height: '40px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }} >导出</button>
                    <button style={{ width: '80px', height: '40px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
                </Form>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                bordered
                style={{ marginLeft: '60px' }}
                scroll={{ y: 700 }}
            />
            <>
                <Modal title="资产余额表" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确认"
                    cancelText="取消">
                    <div className='daloghead'>
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                        <span>
                            运算方式:<Select
                                placeholder="运算方式"
                                allowClear
                                style={{ width: 140 }}
                            >
                                <Option value="+">+</Option>
                                <Option value="-">-</Option>
                            </Select>
                        </span>
                        <button style={{ width: '70px', height: '32px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>添加</button>
                    </div>
                    <Table columns={columnsDalog} dataSource={dalogData} style={{ marginTop: '15px' }} pagination={false} />
                </Modal>
                <Modal title="资产余额表" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel2} okText="确认"
                    cancelText="取消">
                    <div className='daloghead'>
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                        <button style={{ width: '70px', height: '32px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>添加</button>
                    </div>
                    <Table columns={columnsDalog2} dataSource={dalogData2} style={{ marginTop: '15px' }} />;
                </Modal>
            </>
        </div>
    )
}
export default BalanceSheet
function exportExcel(arg0: { json: any; }) {
    throw new Error('Function not implemented.');
}
